<!--表单部件库-->

<template>
  <div class="form-component-library">

    <div class="toolbar">
      <div class="float-left"></div>
      <div class="float-right"></div>
      <div class="clearfix"></div>
    </div>

    <div class="widget-wrapper">
      <Collapse :value="[0,1,2]" style="border: 0px !important;">
        <Panel name="0">
          容器
          <div slot="content">
            <draggable tag="ul" class="widget-card-list"
                       :list="containerWidgetCards" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                       ghost-class="ghost" :sort="false"
                       :clone="addContainerWidgetToCanvas"
                       :move="onContainerWidgetMove"
                       @end="onContainerWidgetEnd">
              <li class="widget-card" v-for="(widgetCard, index) in containerWidgetCards" :key="index">
                <div class="widget-card-header">
                  <img :src="thumbnailPath(widgetCard.thumbnail_uri)"/>
                </div>
                <div class="widget-card-body">
                  <p>{{ widgetCard.alias_name }}</p>
                </div>
              </li>
            </draggable>
          </div>
        </Panel>
        <Panel name="1">
          表单部件
          <div slot="content">
            <draggable tag="ul" class="widget-card-list"
                       :list="formItemWidgetCards" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                       ghost-class="ghost" :sort="false"
                       :clone="addFormItemWidgetToCanvas"
                       :move="onContainerWidgetMove"
                       @end="onContainerWidgetEnd">
              <li class="widget-card" v-for="(widgetCard, index) in formItemWidgetCards" :key="index">
                <div class="widget-card-header">
                  <img :src="thumbnailPath(widgetCard.thumbnail_uri)"/>
                </div>
                <div class="widget-card-body">
                  <p>{{ widgetCard.alias_name }}</p>
                </div>
              </li>
            </draggable>
          </div>
        </Panel>
<!--        <Panel name="2">
          文本部件
          <div slot="content">

          </div>
        </Panel>-->
      </Collapse>

    </div>
  </div>
</template>

<script>

import draggable from "vuedraggable";

import FormDesignerCommonUtil from "@/utils/FormDesignerCommonUtil";

import {createHelpers} from 'vuex-map-fields';
const {mapFields} = createHelpers({
  getterType: 'designer/getField',
  mutationType: 'designer/updateField',
});

export default {
  name: "FormWidgetLibrary",
  components: {
    draggable
  },
  data() {
    return {
      widgetLabelMapping: {
        'GridWidget': '栅格',
        'FormItemInputWidget': '单行文本'
      },
      containerWidgetCards: [
        {
          name: 'GridWidget',
          alias_name: '栅格',
          thumbnail_uri: 'form/container-widget/GridWidget/GridWidget.png'
        },
        // {
        //   type: 'container',
        //   name: 'FormTableContainerWidget',
        //   alias_name: '表格',
        //   thumbnail_uri: ''
        // }
      ],
      formItemWidgetCards: [
        {
          name: 'FormItemInputWidget',
          alias_name: '单行文本',
          thumbnail_uri: 'form/form-item-widget/FormItemInputWidget/FormItemInputWidget.png'
        },
        {
          name: 'FormItemTextareaWidget',
          alias_name: '多行文本',
          thumbnail_uri: 'form/form-item-widget/FormItemTextareaWidget/FormItemTextareaWidget.png'
        },
        {
          name: 'FormItemInputNumberWidget',
          alias_name: '数字输入框',
          thumbnail_uri: 'form/form-item-widget/FormItemInputNumberWidget/FormItemInputNumberWidget.png'
        },
        {
          name: 'FormItemRadioWidget',
          alias_name: '单选框',
          thumbnail_uri: 'form/form-item-widget/FormItemRadioWidget/FormItemRadioWidget.png'
        },
        {
          name: 'FormItemCheckboxWidget',
          alias_name: '多选框',
          thumbnail_uri: 'form/form-item-widget/FormItemCheckboxWidget/FormItemCheckboxWidget.png'
        },
        {
          name: 'FormItemSelectWidget',
          alias_name: '下拉选择器',
          thumbnail_uri: 'form/form-item-widget/FormItemSelectWidget/FormItemSelectWidget.png'
        },
        {
          name: 'FormItemTimePickerWidget',
          alias_name: '时间选择器',
          thumbnail_uri: 'form/form-item-widget/FormItemTimePickerWidget/FormItemTimePickerWidget.png'
        },
        {
          name: 'FormItemDatePickerWidget',
          alias_name: '日期选择器',
          thumbnail_uri: 'form/form-item-widget/FormItemDatePickerWidget/FormItemDatePickerWidget.png'
        },
        {
          name: 'FormItemSwitchWidget',
          alias_name: '开关',
          thumbnail_uri: 'form/form-item-widget/FormItemSwitchWidget/FormItemSwitchWidget.png'
        },
        {
          name: 'FormItemRateWidget',
          alias_name: '评分',
          thumbnail_uri: 'form/form-item-widget/FormItemRateWidget/FormItemRateWidget.png'
        },
        {
          name: 'FormItemColorPickerWidget',
          alias_name: '颜色选择器',
          thumbnail_uri: 'form/form-item-widget/FormItemColorPickerWidget/FormItemColorPickerWidget.png'
        },
        {
          name: 'FormItemSliderWidget',
          alias_name: '滑块',
          thumbnail_uri: 'form/form-item-widget/FormItemSliderWidget/FormItemSliderWidget.png'
        },
        {
          name: 'FormItemFileUploadWidget',
          alias_name: '文件上传',
          thumbnail_uri: 'form/form-item-widget/FormItemFileUploadWidget/FormItemFileUploadWidget.png'
        },
        {
          name: 'FormItemButtonsWidget',
          alias_name: '功能按钮',
          thumbnail_uri: 'form/form-item-widget/FormItemButtonsWidget/FormItemButtonsWidget.png'
        }
      ],
    }
  },
  mounted() {

  },
  methods: {
    // setWidgetConfig(layoutItem) {
    //   layoutItem.id = this.$PnUtil.uuid()
    //   layoutItem.component.id = this.$PnUtil.uuid();
    //   if (layoutItem.component.container) {
    //     layoutItem.component.children.forEach(childLayoutItem => {
    //       this.setWidgetConfig(childLayoutItem)
    //     })
    //   }
    //   // 如果拖入的不为表单容器部件
    //   else if (!layoutItem.component.container) {
    //     layoutItem.component.compConfigData = Object.assign({}, this.$PnUtil.deepClone(this.$PnUtil.getCompConfigData(layoutItem.component.name)))
    //   }
    //   return layoutItem
    // },
    addContainerWidgetToCanvas(widgetCardItem) {
      if (widgetCardItem.name == 'GridWidget') {
        return FormDesignerCommonUtil.buildGridContainerLayoutItem()
      }
    },
    addFormItemWidgetToCanvas(widgetCardItem) {
      let component = {
        id: this.$PnUtil.uuid(),
        name: 'FormWidgetLayoutItem',
        aliasName: widgetCardItem.alias_name,
        layoutItemConfigData: FormDesignerCommonUtil.buildFormWidgetLayoutItemConfigData(),
        component: {
          id: this.$PnUtil.uuid(),
          name: widgetCardItem.name,
          version: '1.0',
          container: false,
          compConfigData: Object.assign({}, this.$PnUtil.deepClone(this.$PnUtil.getCompConfigData(widgetCardItem.name))),
        },
        children: []
      }
      return component
    },
    onContainerWidgetMove(event) {

    },
    onContainerWidgetEnd(event) {

    },


    thumbnailPath(thumbnail_uri) {
      if (thumbnail_uri) {
        try {
          return require('../../../../components/functional/' + thumbnail_uri)
        } catch (e) {
          return ''
        }
      } else {
        return ''
      }
    }
  },
  computed: {
    ...mapFields({
      pageMetadata: 'pageMetadata',
      layoutItems: 'pageMetadata.layout.layoutItems'
    }),
  },
  watch: {}
}
</script>

<style scoped>
>>> .ivu-collapse-content {
  padding: 0px 10px;
}

>>> .ivu-collapse-content-box {
  padding-top: 10px;
  padding-bottom: 10px;
}
</style>

<style lang="less" scoped>
.form-component-library {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .toolbar {
    height: 33px;
    line-height: 31px;
    padding: 0px 5px;
    background-color: #616161;
    border-bottom: 1px solid #424242;
  }

  .widget-wrapper {
    width: 100%;
    height: calc(100% - 33px);
    //padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
  }

  .widget-card-list {
    &:after {
      content: "";
      display: block;
      clear: both;
    }

    .widget-card {
      display: inline-block;
      width: 50%;
      height: auto;
      background-color: #616161;
      cursor: move;
      word-break: break-all;
      margin-bottom: 0px;
      border: 2px solid #424242;
      float: left;

      &:hover {
        border: 2px solid #2196f3;
      }

      .widget-card-header {
        width: 100%;
        height: 45px;
        text-align: center;
        background-color: #0D2B43;
        padding: 5px 0px;
        position: relative;

        img {
          width: 76px;
          height: auto;
          max-width: 100%;
          max-height: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

      .widget-card-body {
        padding: 1px;
        text-align: center;
        p {
          color: #fff;
        }
      }
    }
  }

}
</style>
